{{ define "css"}}
    <link href="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.css" rel="stylesheet">
    <style type="text/css">
        body {background: #e5e5e5;}
        /*解决光标错位的问题*/
        /*参考自：https://github.com/sparksuite/simplemde-markdown-editor/issues/595 */
        .CodeMirror pre{
            margin-bottom: 0em !important;
        }
    </style>
{{ end }}

{{define "content"}}
    <div class="container" style="padding: 2rem 0rem;">
        <div class="columns">
            <div class="column is-full">
                <div class="card">
                    <div class="card-content">
                        <div class="content">
                            <form id="app" method="POST" action="" @submit.prevent="onSubmit">
                                <div class="field">
                                    <label class="label">标题</label>
                                    <div class="control">
                                        <input type="text" class="input" name="title" id="title" placeholder="请填写标题" v-model="form.title" required>
                                    </div>
                                </div>
                                <div class="field">
                                    <label class="label">分类</label>
                                    <div class="control">
                                        <div class="select">
                                            <select name="category_id" id="category_id" v-model="form.category_id">
                                                <option>请选择</option>
                                                {{range .categories}}
                                                    <option value="{{.Id}}">{{.Name}}</option>
                                                {{end}}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                {{include "topic/tips"}}
                                <div class="field">
                                    <div class="control">
                                        <textarea id="editor" v-model="form.editor"></textarea>
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="control">
                                        <button class="button is-link" :disabled="form.errors.any()">更新帖子</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
{{/*            <div class="column">*/}}
{{/*                <div class="card">*/}}
{{/*                    <header class="card-header">*/}}
{{/*                        <p class="card-header-title">*/}}
{{/*                            Component*/}}
{{/*                        </p>*/}}
{{/*                    </header>*/}}
{{/*                    <div class="card-content">*/}}
{{/*                        <div class="content">*/}}
{{/*                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.*/}}
{{/*                        </div>*/}}
{{/*                    </div>*/}}
{{/*                </div>*/}}
{{/*                <br>*/}}
{{/*                <div class="card">*/}}
{{/*                    <header class="card-header">*/}}
{{/*                        <p class="card-header-title">*/}}
{{/*                            Component*/}}
{{/*                        </p>*/}}
{{/*                    </header>*/}}
{{/*                    <div class="card-image">*/}}
{{/*                        <figure class="image is-4by3">*/}}
{{/*                            <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">*/}}
{{/*                        </figure>*/}}
{{/*                    </div>*/}}
{{/*                    <div class="card-content">*/}}
{{/*                        <div class="content">*/}}
{{/*                            Lorem ipsum dolor.*/}}
{{/*                        </div>*/}}
{{/*                    </div>*/}}
{{/*                    <footer class="card-footer">*/}}
{{/*                        <a href="#" class="card-footer-item">Save</a>*/}}
{{/*                        <a href="#" class="card-footer-item">Edit</a>*/}}
{{/*                    </footer>*/}}
{{/*                </div>*/}}
{{/*                <div class="card">*/}}

{{/*                </div>*/}}
{{/*                <div class="card">*/}}

{{/*                </div>*/}}
{{/*            </div>*/}}
        </div>
    </div>
{{end}}}

{{define "js"}}
    {{include "topic/editor"}}
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                form: new Form({
                    title: {{.topic.Title}},
                    category_id: {{.topic.Category.Id}},
                    editor: {{.topic.OriginBody}},
                    origin_body: {{.topic.OriginBody}}
                }),
            },
            delimiters:['${', '}'],
            methods: {
                onSubmit() {
                    if (this.form.title === '') {
                        swal("请正确填写标题！", "","warning");
                        return false;
                    }
                    if (this.form.category_id === 0) {
                        swal("请选择正确的分类", "","warning");
                        return false;
                    }
                    this.form.editor = simplemde.value();
                    if (this.form.editor === '') {
                        swal("请正确填写topic内容！", "","warning");
                        return false;
                    }

                    this.form.category_id = parseInt(this.form.category_id);
                    this.form.origin_body = this.form.editor;

                    // post, default use json
                    this.form.post("/topic/edit/{{.topic.Id}}")
                        .then(response => {
                            if (response.code === 0) {
                                window.location.href = "/topics/{{.topic.Id}}";
                            } else {
                                swal("发布失败！", "","error");
                            }
                        })
                        .catch(errors => {
                            console.log(errors);
                        });

                },
                {{/*saveTopic: function (e) {*/}}
                {{/*    e.preventDefault();*/}}
                {{/*    if (this.title === '') {*/}}
                {{/*        swal("请正确填写标题！", "","warning");*/}}
                {{/*        return false;*/}}
                {{/*    }*/}}
                {{/*    if (this.category_id === 0) {*/}}
                {{/*        swal("请选择正确的分类", "","warning");*/}}
                {{/*        return false;*/}}
                {{/*    }*/}}
                {{/*    this.editor = $('#editor').val();*/}}
                {{/*    if (this.body === '') {*/}}
                {{/*        swal("请正确填写topic内容！", "","warning");*/}}
                {{/*        return false;*/}}
                {{/*    }*/}}

                {{/*    var data = {*/}}
                {{/*        "category_id": this.category_id,*/}}
                {{/*        "title": this.title,*/}}
                {{/*        "origin_body": this.editor,*/}}
                {{/*    };*/}}

                {{/*    let config = {*/}}
                {{/*        headers: {*/}}
                {{/*            'Content-Type': 'application/json'*/}}
                {{/*        }*/}}
                {{/*    };*/}}
                {{/*    this.$http.post("/topic/edit/{{.topic.Id}}", JSON.stringify(data), config).then((response) => {*/}}
                {{/*        console.log(response);*/}}
                {{/*        if (response.data.code === 0) {*/}}
                {{/*            // http://mishengqiang.com/sweetalert/*/}}
                {{/*            window.location.href = "/topics/{{.topic.Id}}";*/}}
                {{/*            return true;*/}}
                {{/*        } else {*/}}
                {{/*            swal("发布失败！", "","error");*/}}
                {{/*            return false;*/}}
                {{/*        }*/}}
                {{/*    }).catch( error => {*/}}
                {{/*        console.log(error);*/}}
                {{/*    });*/}}
                {{/*}*/}}
            }
        });
    </script>
{{end}}}